<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时钟</title>
    <script src="./flexible.js">

    </script>
    <link rel="stylesheet" href="./time.css">
    <script>
        window.addEventListener("load", function () {
            document.oncontextmenu = function () {
                if (event.preventDefault) {
                    event.preventDefault();
                } else {
                    event.returnValue = false;
                }
            } // 禁止右键功能,单击右键将无任何反应
            document.onselectstart = function () {
                if (event.preventDefault) {
                    event.preventDefault();
                } else {
                    event.returnValue = false;
                }
            } // 禁止先择,也就是无法复制
            let yue = document.querySelector(".date").children[0];//获取月份
            let day = document.querySelector(".date").children[1];
            let shi = document.querySelector(".time").children[0];
            let fen = document.querySelector(".time").children[1];
            let s = document.querySelector(".time").children[2];
            let flags = [true, true];
            let date = new Date();
            let body = document.body;
            settime(date);
            setInterval(function () {
                date = null;
                date = new Date();
                settime(date);
                tiao();

            }, 1000)
            function tiao() {
                let dian1 = document.querySelectorAll("#box");
                for (let x = 0; x < dian1.length; x++) {
                    if (flags[x]) {
                        dian1[x].innerHTML = '';
                        flags[x] = false;
                    } else {
                        flags[x] = true;
                    }
                }

            }

            function settime(date) {
                yue.innerHTML = (date.getMonth() + 1) + "月";
                day.innerHTML = date.getDate() + "日";
                shi.innerHTML = date.getHours() > 9 ? date.getHours() + "<span id=\"box\">:</span>" : "0" + date.getHours() + "<span id=\"box\">:</span>";

                fen.innerHTML = date.getMinutes() > 9 ? date.getMinutes() + "<span id=\"box\">:</span>" : "0" + date.getMinutes() + "<span id=\"box\">:</span>";
                s.innerHTML = date.getSeconds() > 9 ? date.getSeconds() : "0" + date.getSeconds();





                // 早上
                if (date.getHours() > 0 && date.getHours() < 9) {
                    body.style.backgroundColor = "rgb(254, 245, 150)";
                    body.style.color = "rgb(176, 171, 165)";

                    // 中午
                } else if (date.getHours() < 18 && date.getHours() > 0) {
                    body.style.color = "rgb(246, 213, 26)";
                    body.style.backgroundColor = "rgb(251, 126, 34)";
                    // 晚上
                } else if (date.getHours() != 0 && date.getHours() <= 23) {

                    body.style.color = "black";
                    body.style.backgroundColor = "rgb(1, 30, 60)";
                } else {
                    body.style.color = "rgb(1, 30, 60)";
                    body.style.backgroundColor = "black";
                }
            }
            let flag = false;
            /* tab键所对应的keyCode等于9 */
            document.onkeydown = function () {
                if (flag) {
                    console.log("已进入");
                    if (event.keyCode == 122) {
                        //9是tab键所对应的keyCode值 
                        return false; //返回false即可禁用相应键
                    }
                }
                flag = true;
            }

        });



    </script>

</head>

<body onLoad="javascript:window.resizeTo(screen.availWidth,screen.availHeight);window.moveTo(0,0) "></body>
<h1 class="date"><span>10月</span><span>20日</span></h1>
<h1 class="time">
    <span>11<span id="box">:</span></span>
    <span>05 <span id="box">:</span></span>
    <span>12</span>
</h1>
<audio src="./timemusic.mp3" loop="loop" autoplay='autoplay'></audio>
</body>

</html>